<template>
  <div class="report">
    <header class="head">
      <h3 class="title">Report</h3>
      <v-btn class="add-btn" @click="newProblem">
        <v-icon class="add-icon">mdi-plus-thick</v-icon>
      </v-btn>
    </header>
    <v-card class="report-list">
      <div class="report-problem-wrap">
        <v-skeleton-loader
          v-if="propLoadingReportProblem"
          height="100%"
          tile
          type="list-item@20"
        ></v-skeleton-loader>
        <div v-else class="report-problem">
          <v-card class="report-item">
            <h3 class="report-title">Report Problem</h3>
          </v-card>
          <v-card
            class="report-item"
            @click="active(reportProblem, true)"
            v-for="reportProblem in propReportProblemList"
            :key="reportProblem.id"
            :class="{
              active: syncedSelected && syncedSelected.id === reportProblem.id,
            }"
          >
            <v-avatar
              class="head-portrait"
              width="32"
              height="32"
              min-width="unset"
            >
              AL
            </v-avatar>
            <div class="report-item-content">
              <h4 class="item-title">
                {{ reportProblem.SRCate }}- {{ reportProblem.type }}
              </h4>
              <p class="item-subtitle">
                {{ reportProblem.problemDescription }}
              </p>
              <p class="item-subtitle">
                @{{ reportProblem.floor }}{{ reportProblem.district }}
              </p>
            </div>
          </v-card>
        </div>
      </div>
      <div class="sign-off-wrap">
        <v-skeleton-loader
          v-if="propLoadingSignOff"
          height="100%"
          tile
          type="list-item@20"
        ></v-skeleton-loader>
        <div v-else class="sign-off">
          <v-card class="report-item">
            <h3 class="report-title">Sign Off</h3>
          </v-card>
          <v-card
            class="report-item"
            @click="active(signOff, false)"
            v-for="signOff in propSignOffList"
            :key="signOff.id"
            :class="{
              active: syncedSelected && syncedSelected.id === signOff.id,
            }"
          >
            <v-avatar
              class="head-portrait"
              width="32"
              height="32"
              min-width="unset"
            >
              AL
            </v-avatar>
            <div class="report-item-content">
              <h4 class="item-title">
                {{ signOff.SRCate }}- {{ signOff.type }}
              </h4>
              <p class="item-subtitle">{{ signOff.problemDescription }}</p>
              <p class="item-subtitle">
                @{{ signOff.floor }}{{ signOff.district }}
              </p>
            </div>
          </v-card>
        </div>
      </div>
    </v-card>
  </div>
</template>
<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import { IReport } from "@/components/Kiosk";
@Component({
  props: {
    reportProblemList: {
      type: Array,
    },
    signOffList: {
      type: Array,
    },
    loadingReportProblem: {
      type: Boolean,
      default: false,
    },
    loadingSignOff: {
      type: Boolean,
      default: false,
    },
  },
})
export default class Report extends Vue {
  @PropSync("selected", { type: Object, default: () => ({}) })
  syncedSelected!: IReport;
  newProblem() {
    this.$bus.$emit("showNewProblemModulePart");
  }
  active(report: IReport, isReportProblem: boolean) {
    this.$emit("active", report, isReportProblem);
  }
  get propReportProblemList() {
    return this.$props.reportProblemList;
  }
  get propLoadingReportProblem() {
    return this.$props.loadingReportProblem;
  }
  get propSignOffList() {
    return this.$props.signOffList;
  }
  get propLoadingSignOff() {
    return this.$props.loadingSignOff;
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Kiosk/Report/Report.scss";
</style>
